<template>
	<div class="ext_body" id="ext__body" onclick="()=>{console.log('caiji')}">
		<div class="ext_default" id="ext__default">
			<div class="def_icon" id="def__icon">
				<div class="i_line" id="i__line"></div>
				<div class="i_arrow i_a1" id="i__a1"></div>
				<div class="i_arrow i_a2" id="i__a2"></div>
			</div>
		</div>
	</div>
</template>

<script setup>
import { mountComponent, hoverLeaveAnimation, endsTimeAnimation } from '../../../globalJS.js';
// import {hoverLeaveAnimation} from '../../../globalJS.js';
import { onMounted } from 'vue';
let prop = defineProps(['componentUrl']);
let hostHtml;
let MountedApp;

onMounted(() => {
	mountInit();
});

function mountInit() {
	let extBodyEl = document.getElementById('ext__default');
	extBodyEl.addEventListener('click', clickMountEl);
	BindleEl();
}

function clickMountEl(e) {
	e.stopImmediatePropagation();
	console.count(clickMountEl);
	let extBodyEl = document.getElementById('ext__body');
	hostHtml = extBodyEl.innerHTML;

	extBodyEl.removeEventListener('click', clickMountEl);
	endsTimeAnimation(extBodyEl, 'extendApp');
	mountComponent('#ext__body', prop['componentUrl']).then(result => {
		MountedApp = result;
		console.log(MountedApp);
		let shadow = document.getElementById('window__shade');
		shadow.style.display = 'block';
		shadow.addEventListener('click', shadowHandle);
		function shadowHandle() {
			//卸載 元素
			MountedApp.unmount();

			let delaytime = endsTimeAnimation(extBodyEl, 'removeApp');
			extBodyEl.innerHTML = hostHtml;
			shadow.style.display = 'none';
			shadow.removeEventListener('click', shadowHandle);
			setTimeout(() => {
				// console.log(hostHtml);
				//初始化 本組件
				// 加載 原元素
				mountInit();
			}, delaytime);
		}
	});
}

function BindleEl() {
	let iconEl = document.getElementById('def__icon');
	// let i_lineEl = document.getElementById('i__line');
	let i_a1El = document.getElementById('i__a1');
	let i_a2El = document.getElementById('i__a2');

	// let i_lineHLAnimation = hoverLeaveAnimation(i_lineEl, 'i_line_hover', 'i_line_leave');
	let i_a1Animation = hoverLeaveAnimation(i_a1El, 'i_a1_hover', 'i_a1_leave');
	let i_a2Animation = hoverLeaveAnimation(i_a2El, 'i_a2_hover', 'i_a2_leave');

	function BindleHandle() {
		let on = false;
		function BindleHover() {
			if (on == false) {
				on = true;
				console.log('hover');
				// i_lineHLAnimation['hover']();
				i_a1Animation['hover']();
				i_a2Animation['hover']();
			}
		}
		function BindleLeave() {
			on = false;
			console.log('leave');
			// i_lineHLAnimation['leave']();
			i_a1Animation['leave']();
			i_a2Animation['leave']();
		}
		return {
			BindleHover,
			BindleLeave
		};
	}
	let iconElBindle = BindleHandle();
	iconEl.addEventListener('mouseover', iconElBindle['BindleHover']);
	iconEl.addEventListener('mouseleave', iconElBindle['BindleLeave']);
}
</script>

<style scoped lang="scss">
.ext_body {
	width: 60%;
	height: 20%;
	margin: auto;
	margin-bottom: 0px;
}
.ext_default {
	width: 100%;
	height: 100%;

	display: flex;
	justify-content: center;
	align-items: center;
}
.def_icon {
	width: 5rem;
	height: 5rem;
	position: relative;
}
.i_line {
	width: 2.2rem;
	height: 1.5rem;

	position: absolute;

	left: 50%;
	top: -0.55rem;
	transform: translateX(-50%);

	border-width: 0 0 0.15rem 0;
	border-style: solid;
	border-color: antiquewhite;
}
.i_arrow {
	width: 1.5rem;
	height: 1.5rem;

	left: 50%;
	position: absolute;

	transform: translateX(-50%) rotate(-135deg);

	border-width: 0 0.15rem 0.15rem 0;
	border-style: solid;
	border-color: antiquewhite;
}
.i_a1 {
	top: 1.8rem;
}
.i_a2 {
	top: 3.8rem;
}

// .def_icon:hover > .i_a1 {
// 	top: 1.6rem;
// 	transition: top 0.5s ease 0.3s;
// }
// .def_icon:hover > .i_a2 {
// 	top: 3.2rem;
// 	transition: top 0.5s ease 0.1s;
// }

// .i_line_hover {
// 	animation-name: ilineH;

// 	animation-duration: .1s;
// 	animation-delay: .5s;
// 	animation-fill-mode: forwards;
// }
// .i_line_leave {
// 	animation-name: ilineL;

// 	animation-duration: .1s;
// 	animation-delay: .5s;
// 	animation-fill-mode: forwards;
// }
.i_a1_hover {
	animation-name: iarrH;

	animation-duration: 0.3s;
	animation-delay: 0s;
	animation-fill-mode: forwards;
}
.i_a1_leave {
	animation-name: iarrL;

	animation-duration: 0.3s;
	animation-delay: 0s;
	animation-fill-mode: forwards;
}
.i_a2_hover {
	animation-name: ia2H;

	animation-duration: 0.3s;
	animation-delay: 0s;
	animation-fill-mode: forwards;
}
.i_a2_leave {
	animation-name: ia2L;

	animation-duration: 0.3s;
	animation-delay: 0s;
	animation-fill-mode: forwards;
}

// @keyframes ilineH {
// 	0% {
// 	}
// 	100% {
// 		top: -0.45rem;
// 	}
// }
// @keyframes ilineL {
// 	0% {
// 		top: -0.45rem;
// 	}
// 	100% {
// 	}
// }
@keyframes iarrH {
	0% {
	}
	83.34% {
		top: 1.8rem;
	}
	100% {
		top: 1.7rem;
	}
}
@keyframes iarrL {
	0% {
		top: 1.7rem;
	}
	16.67% {
		top: 1.8rem;
	}
	100% {
	}
}
@keyframes ia2H {
	0% {
	}
	100% {
		top: 3.2rem;
	}
}
@keyframes ia2L {
	0% {
		top: 3.2rem;
	}
	100% {
	}
}

.extendApp {
	position: relative;
	overflow: hidden;
	animation-name: extAppAnima;
	animation-duration: 1s;
	animation-delay: 0s;
	animation-fill-mode: forwards;

	animation-timing-function: ease;
}
@keyframes extAppAnima {
	0% {
		max-height: 0px;
	}
	100% {
		max-height: 500px;
	}
}
.removeApp {
	position: relative;
	overflow: hidden;
	animation-name: removeAppAnima;
	animation-duration: 0.8s;
	animation-delay: 0s;
	animation-fill-mode: forwards;

	animation-timing-function: ease;
}
@keyframes removeAppAnima {
	0% {
		max-height: 500px;
	}
	100% {
		max-height: 200px;
	}
}
</style>
